<template>
	<view class="uni-tab-bar">
		<block v-for="(tab, index) in tabBars" :key="index">
			<!-- tap 触摸事件 -->
			<view class="swiper-tab-list" :class="{ active: index === tabIndex }" @tap="tabChang(index)">
				{{ tab.name }}
				<view></view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		tabBars: Array,
		tabIndex:Number
	},
	methods: {
		tabChang(index) {
			this.$emit("changTab",index);
		}
	}
};
</script>

<style lang="less">
.uni-tab-bar {
	display: flex;
	flex-direction:row;
	justify-content: center;
	align-items: center;
	background-color: #FFFFFF;
	
	.swiper-tab-list {
		width: auto;
		color: #666666;
		font-size: 36rpx;
		line-height: 36rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		margin-left: 30px;
	}
	.active {
		color: #333333;
		font-weight: 500;
		font-size: 36rpx;
		line-height: 36rpx;
		view {
			margin-top: 10rpx;
			width: 100%;
			border-top: 6rpx solid #feb7ba;
			border-bottom: 6rpx solid #feb7ba;
			border-radius: 20rpx;
		}
	}
}
</style>
